<template>
  <div class="region-list-page">
    <!-- 页面标题 -->
    <div class="page-header mb-6">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold text-slate-800 ">区域管理</h1>
        </div>
        <el-button type="primary" @click="handleAdd" class="w-[100px]">
          添加区域
        </el-button>
      </div>
    </div>
    
    <!-- 区域列表卡片 -->
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <div class="text-lg font-medium">区域列表</div>
          <div class="flex space-x-2">
            <el-button size="small" @click="handleRefresh">刷新</el-button>
          </div>
        </div>
      </template>
      
      <div v-loading="loading">
        <!-- 区域表格 -->
        <el-table
          :data="regionList"
          style="width: 100%"
          border
          row-key="id"
        >
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="区域名称" min-width="150" show-overflow-tooltip>
            <template #default="scope">
              <div class="flex items-center">
                <div 
                  class="w-3 h-3 rounded-full mr-3 flex-shrink-0"
                  :style="{ backgroundColor: getRegionColor(scope.row.code) }"
                ></div>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="区域代码" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sortOrder" label="排序" width="100" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag 
                size="small" 
                :type="scope.row.status === 1 ? 'success' : 'danger'"
              >
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="updatedAt" label="修改时间" min-width="180">
            <template #default="scope">
              <span>{{ formatDateTime(scope.row.updatedAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" fixed="right">
            <template #default="scope">
              <el-button size="small" text @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button 
                size="small" 
                text 
                :type="scope.row.status === 1 ? 'warning' : 'success'" 
                @click="toggleStatus(scope.row)"
              >
                {{ scope.row.status === 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button 
                size="small" 
                text 
                type="danger" 
                @click="deleteRegion(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { regionAPI } from '~/services/api'

// 设置使用管理布局
definePageMeta({
  layout: 'admin'
})

// 数据加载状态
const loading = ref(false)

// 区域列表数据
const regionList = ref([])

const router = useRouter()

// 时间格式化
const formatDateTime = (val) => {
  if (!val) return '-'
  try {
    // 兼容后端 LocalDateTime 的 ISO 字符串
    const d = new Date(val)
    if (Number.isNaN(d.getTime())) return String(val)
    const pad = (n) => String(n).padStart(2, '0')
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
  } catch {
    return String(val)
  }
}

// 根据区域代码生成颜色
const getRegionColor = (code) => {
  if (!code) return '#6b7280'
  
  // 预定义一些常用区域的颜色
  const colorMap = {
    'CN': '#ef4444', // 红色 - 中国
    'US': '#3b82f6', // 蓝色 - 美国
    'JP': '#f59e0b', // 黄色 - 日本
    'KR': '#8b5cf6', // 紫色 - 韩国
    'EU': '#10b981', // 绿色 - 欧洲
    'UK': '#06b6d4', // 青色 - 英国
    'AU': '#f97316', // 橙色 - 澳大利亚
    'CA': '#84cc16', // 青绿色 - 加拿大
    'RU': '#dc2626', // 深红色 - 俄罗斯
    'IN': '#059669', // 深绿色 - 印度
  }
  
  // 如果代码匹配预定义颜色，使用预定义颜色
  if (colorMap[code]) {
    return colorMap[code]
  }
  
  // 否则根据代码生成随机但一致的颜色
  const colors = [
    '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981',
    '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899', '#f43f5e',
    '#7c3aed', '#1d4ed8', '#059669', '#dc2626', '#991b1b'
  ]
  
  // 使用代码的字符总和来确保相同代码总是得到相同颜色
  const hash = code.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
  return colors[hash % colors.length]
}

// 加载区域数据
const loadRegions = async () => {
  try {
    loading.value = true
    
    // 调用后端API获取区域列表
    const result = await regionAPI.getAllRegions()
    
    if (result.code === 200) {
      regionList.value = Array.isArray(result.data) ? result.data : []
    } else {
      ElMessage.error(result.message || '加载区域失败')
      regionList.value = []
    }
  } catch (error) {
    console.error('加载区域失败:', error)
    ElMessage.error('加载区域失败')
    regionList.value = []
  } finally {
    loading.value = false
  }
}

// 刷新数据
const handleRefresh = async () => {
  try {
    await loadRegions()
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

// 添加区域
const handleAdd = () => {
  router.push('/admin/region/add')
}

// 编辑区域
const handleEdit = (row) => {
  router.push(`/admin/region/edit/${row.id}`)
}

// 切换状态
const toggleStatus = async (row) => {
  try {
    const newStatus = row.status === 1 ? 0 : 1
    const statusText = newStatus === 1 ? '启用' : '禁用'
    
    await ElMessageBox.confirm(
      `确定要${statusText}「${row.name}」区域吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用后端API更新状态
    const result = await regionAPI.updateRegionStatus(row.id, newStatus)
    
    if (result.code === 200) {
      // 更新本地数据
      row.status = newStatus
      ElMessage.success(`已${statusText}「${row.name}」区域`)
    } else {
      ElMessage.error(result.message || '状态切换失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('状态切换失败:', error)
      ElMessage.error('状态切换失败，请重试')
    }
  }
}

// 删除区域
const deleteRegion = async (id) => {
  try {
    const region = regionList.value.find(item => item.id === id)
    
    await ElMessageBox.confirm(
      `确定要删除「${region?.name ?? ''}」区域吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用后端API删除区域
    const result = await regionAPI.deleteRegion(id)
    
    if (result.code === 200) {
      // 从本地列表中移除
      regionList.value = regionList.value.filter(item => item.id !== id)
      ElMessage.success(`已删除「${region?.name ?? ''}」区域`)
    } else {
      ElMessage.error(result.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }
}

// 初始化
onMounted(() => {
  loadRegions()
})
</script>

<style scoped>
/* 表格样式优化 */
:deep(.el-table) {
  --el-table-header-bg-color: var(--el-fill-color-light) !important;
  --el-table-row-hover-bg-color: rgba(0, 0, 0, 0.02) !important;
  border-radius: 8px;
  overflow: hidden;
}


:deep(.el-card__header) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

</style>